<template>
  <div class="container">

    <div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a :class="['mui-control-item',item.id==0 ? 'mui-active':'']" href="#item1mobile" v-for="item in ImgCategory" :key="item.id" @click="getImages(item.id)">
							{{ item.title }}
						</a>
					</div>
				</div>
			</div>
			<ul class="lazyul">
  				<router-link tag="li" v-for="(item,i) in imgData" :key="i" :to="'/homePage/photoInfos/'+item.id">
    				<img v-lazy="item.img_url">
					<div class="brief">
						<h4>{{ item.title }}</h4>
						<div v-html="item.zhaiyao"></div>
					</div>
  				</router-link>
			</ul>
  </div>
</template>

<script>
// 导入 mui 的JS文件， 这样，就可以使用 mui 来初始化 滑动控件了
import mui from "../../../lib/mui/js/mui.js";

export default {
  data() {
    return {
		ImgCategory:[],
		imgData:[]
	};
  },
  created(){
	  this.getImgCategory();
	  this.getImages(0)
  },
  methods: {
	  async getImgCategory() {
		  let { data } = await this.$http.get('/api/getImgCategory')
		//   console.log(data);
		  if(data.status==0){
			  this.ImgCategory = data.message;
			  this.ImgCategory.unshift({'title':'全部',id:0})
		  }
	  },
	  async getImages(id){
		  let { data } = await this.$http.get('/api/getImages?id='+id)
			// console.log(data.message);
			if (data.status==0) {
				// console.log(data.message);
				this.imgData = data.message
			}

	  }
  },
  mounted() {
    // 当此钩子函数执行的时候，我们才可以进行控件或插件的初始化工作；
    mui(".mui-scroll-wrapper").scroll({
      deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    });
  }
};
</script>

<style lang="less" scoped>
.mui-slider {
  touch-action: pan-x;
}
.container {
	margin-bottom: 50px;
}
.lazyul {
	background: gray;
	list-style: none;
	margin: 0;
	padding: 0;
	li {
		position:relative;
		.brief {
			position: absolute;
			bottom: 5px;
			color: #fff;
			
			h4 {
				text-align: center;
			}
			div {
				text-align: left;
				text-indent: 2em;
			}
		}
		img[lazy=loading] {
			width: 40px;
			height: 300px;
			margin: auto;	
		}
		
		img {
			width: 100%;
			vertical-align: middle;
		}

		text-align: center;
	}
}
</style>
